<template>
  <div class="tabs">
    <button @click="isOpen=!isOpen">切换</button>
    <p :class="'modal'+(isOpen?' open':'')">我是文本</p>
    <!-- class的对象绑定,属性名称/键是class类名,属性值是个布尔量-->
    <p :class="{'modal':true,'open':isOpen}">我是文本</p>
    <!-- 静态的类和动态插值绑定的类名不会覆盖,会合并 -->
    <p class="modal" :class="{'open':isOpen}">我是文本</p>
    <!-- 样式的对象绑定,属性名是样式的名称, -->
    <p v-if="isOpen" :class="['modal',isOpen?'open':'']" :style="{'font-size':fontSize+'px','font-weight':fontWeight,'color':color}">样式绑定</p>
    <ul class="tab-list">
      <li v-for="(d,i) in list" :key="d.title" @click="activeIndex=i" :class="activeIndex===i?'active':''">
        {{d.title}}
      </li>
    </ul>
    <div class="content" v-html="list[activeIndex].content"></div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        classArr:['modal','open'],
        classObj:{
          modal:true,
          open:false
        },
        fontSize:30,
        fontWeight:'bold',
        color:'red',
        //控制p标签的open那个class存在与否
        isOpen:false,
        // 高亮/打开tab的下标
        activeIndex:0,
        list:[
          {
            title:'静夜思',
            content:'<p>床前明月光,<br/>疑是地上霜。<br/>举头望明月,<br/>低头思故乡</p>'
          },
          {
            title:'春晓',
            content:'<p>春眠不觉晓,<br/>处处闻啼鸟。<br/>夜来风雨声,<br/>花落知多少</p>'
          },
          {
            title:'咏鹅',
            content:'<p>鹅鹅鹅,<br/>白毛浮绿水。<br/>红掌拨清波,<br/>花落知多少</p>'
          }
        ]
      }
    },

  }
</script>

<style lang="sass" scoped>
.tabs
  padding: 50px
  .tab-list
    display: flex
    border:1px solid #010
    border-radius: 3px
    & li
      flex: 1 //flex: 1 1 0
    // + 除了第一个
    & li+li
      border-left:1px solid #000
    & li.active
      transition:.6s
      background: #000
      color: #fff
</style>
